<template>
  <div id="app">
    <button @click="() => {this.taskInfo = []}">CLEAR ALL</button>
    <ul style='text-align:left'>
      <li style='display:block' v-for='(item, index) in taskInfo' :key='index'>{{item.realTime}}----TASK ID：{{item.taskId}}, MODE:{{item.mode}}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      taskInfo: []
    }
  },
  methods: {
    dealWithTime (data) {
      // let formatDateTime
      let Y = data.getFullYear()
      let M = data.getMonth() + 1
      let D = data.getDate()
      let H = data.getHours()
      let Min = data.getMinutes()
      let S = data.getSeconds()
      let W = data.getDay()
      H = H < 10 ? ('0' + H) : H
      Min = Min < 10 ? ('0' + Min) : Min
      S = S < 10 ? ('0' + S) : S
      switch (W) {
        case 0:
          W = '天'
          break
        case 1:
          W = '一'
          break
        case 2:
          W = '二'
          break
        case 3:
          W = '三'
          break
        case 4:
          W = '四'
          break
        case 5:
          W = '五'
          break
        case 6:
          W = '六'
          break
        default:
          break
      }
      let realTime = H + ':' + Min + ':' + S
      return realTime
    }
  },
  created () {
    this.$schedule.init({
      tasks: {
        task1: 1000,
        task2: 5000,
        task3: 10000
      },
      callBack: (params) => {
        this.taskInfo.unshift({taskId: params.taskId, realTime: this.dealWithTime(new Date()), mode: params.mode})
      }
    })
    this.$schedule.start()
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
